<template>
  <div class="product-management">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-input v-model="brandName" placeholder="请输入产品品牌"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-col>
    </el-row>

    <el-table :data="brands" style="width: 100%">
      <el-table-column prop="brand" label="产品品牌" width="200"></el-table-column>
      <el-table-column prop="createdTime" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { queryBrands } from '@/api/brands.js'; // 假设这是你的API请求函数

// 假设的数据源
const brands = ref([
  { id: 1, name: '口腔护理', createTime: '2021-07-19 14:30:29' },
  { id: 2, name: '杀菌消毒', createTime: '2021-07-19 14:30:29' },
  { id: 3, name: '预防感染', createTime: '2021-07-19 14:30:29' },
  { id: 4, name: '诊所整理', createTime: '2021-07-19 14:30:29' }
]);

const brandName = ref('');

const handleSearch = () => {
  console.log('Search:', brandName.value);
};

const handleReset = () => {
  brandName.value = '';
};

const handleAdd = () => {
  console.log('Add');
};

const handleEdit = (index, row) => {
  console.log('Edit:', index, row);
};

const handleDelete = (index, row) => {
  console.log('Delete:', index, row);
};

onMounted(() => {
  fetchData();
});

async function fetchData() {
  const res = await queryBrands();
  console.log(res)
  brands.value = res.data;
}
</script>

<style scoped>
.product-management {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
